<!-- About.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { UploadFilled } from '@element-plus/icons-vue'

const router = useRouter()
const selectedFiles = ref<File[]>([])
const collectionName = ref('')

// 计算属性
const fileCountInfo = computed(() => {
  if (selectedFiles.value.length > 0) {
    return `已选择 ${selectedFiles.value.length} 个文件`
  }
  return '提示：按住 Ctrl 或 Shift 键可选择多个文件'
})

const canUpload = computed(() => {
  return selectedFiles.value.length > 0 && collectionName.value.trim() !== ''
})

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files ? Array.from(target.files) : []
  selectedFiles.value = files
}

// 上传文件函数
const uploadFiles = async () => {
  if (!canUpload.value) return

  const formData = new FormData()

  // 添加文件到FormData
  selectedFiles.value.forEach(file => {
    formData.append('files', file)
  })

  // 添加集合名称
  formData.append('collection_name', collectionName.value)

  try {
    // 这里替换为实际的上传API地址
    const response = await fetch('/uploadfiles/', {
      method: 'POST',
      body: formData
    })

    if (response.ok) {
      ElMessage.success('文件上传成功!')
      // 重置表单
      selectedFiles.value = []
      collectionName.value = ''
      // 清空文件输入框
      const fileInput = document.getElementById('files') as HTMLInputElement
      if (fileInput) fileInput.value = ''
    } else {
      ElMessage.error('上传失败: ' + response.statusText)
    }
  } catch (error) {
    console.error('上传错误:', error)
    ElMessage.error('上传过程中发生错误')
  }
}

// 返回首页
const goBack = () => {
  router.push('/')
}
</script>

<template>
  <div class="container">
    <div class="header">
      <h1>知识库上传</h1>
      <el-button @click="goBack" type="primary" plain>返回首页</el-button>
    </div>

    <div class="upload-form">
      <div class="form-group">
        <label for="files">选择文件 (可多选):</label>
        <input
          id="files"
          type="file"
          multiple
          @change="handleFileSelect"
        >
        <div class="file-info">
          {{ fileCountInfo }}
        </div>
      </div>

      <div class="form-group">
        <label for="collection_name">集合名称:</label>
        <el-input
          id="collection_name"
          v-model="collectionName"
          placeholder="请输入集合名称"
          clearable
        />
      </div>

      <el-button
        type="primary"
        :disabled="!canUpload"
        @click="uploadFiles"
        :icon="UploadFilled"
      >
        上传文件
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  margin: 0;
  color: #333;
}

.upload-form {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  background-color: #fafafa;
}

.file-info {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>
